import React, { Component } from 'react';
import { Button, Icon, Spin, Alert } from 'antd';

import fetchJSONP from 'fetch-jsonp';

class MovieDetail extends Component {
    constructor(props) {
        super(props);
        this.state = {  
            info: {},
            isloadng: true,
        }
    }
    render() { 
        return ( <div>
            <Button type="primary" onClick={this.goBack}>
                <Icon type="left"/>
                    返回电影列表页面
            </Button>
            {this.renderInfo()}


    
        </div> );
    }
    goBack = ()=>{
        this.props.history.go(-1);
    }

    componentWillMount(){
        fetchJSONP('https://api.douban.com/v2/movie/subject/'+this.props.match.params.id)
        .then(res=>res.json())
        .then(data=>{
            this.setState({
                info: data,
                isloadng: false,
            })
        })
    }

    renderInfo = ()=>{
        if(this.state.isloadng){
            return (<Spin tip="Loading...">
                <Alert
                message="正在请求电影数据"
                description="精彩内容马上程现..."
                type="info"
                />
             </Spin>
            )
        }else{
            return (  <div style={{textAlign:"center"}}>  
                <h1 >{this.state.info.title}</h1>
                <img src={this.state.info.images.large} alt="" />
                <p style={{ textIndent:'2em',lineHeight: '30px'}}>{this.state.info.summary}</p>
            </div>    
            )
        }
    }
}
 
export default MovieDetail;